<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">
      <!-- 排序列 -->
      <template #sort="{ record }">
        <a-input-number
            :default-value="record.sort"
            mode="button"
            @change="changeSort($event, record.id)"
            :min="0"
            :max="1000"
        />
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch
            :checked-value="1"
            unchecked-value="2"
            @change="changeStatus($event, record.id)"
            :default-checked="record.status == 1"
        />
      </template>

      <template #operationBeforeExtend="{ record }">
        <a-link @click="openLeaderModal(record)"><icon-user /> 领导列表</a-link>
      </template>
    </ma-crud>

    <leader-list ref="leaderRef" />

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import dept from '@/api/system/dept'
import { Message } from '@arco-design/web-vue'
// import LeaderList from './leader.vue'
import LeaderList from '@/views/system/dept/leader.vue'


const crudRef = ref()
const leaderRef = ref()

const changeStatus = async (status, id) => {
  const response = await dept.changeStatus({ id, status })
  if (response.success) {
    Message.success(response.message)
  }
}

const changeSort = async (value, id) => {
  const response = await dept.numberOperation({ id, numberName: 'sort', numberValue: value })
  if (response.success) {
    Message.success(response.message)
  }
}

const openLeaderModal = (record) => {
  leaderRef.value.open(record)
}

const crud = reactive({
  api: dept.getList,
  recycleApi: dept.getRecycleList,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationWidth: 220,
  add: { show: true, api: dept.save, auth: ['system:dept:save'] },
  edit: { show: true, api: dept.update, auth: ['system:dept:update'] },
  delete: {
    show: true,
    api: dept.deletes, auth: ['system:dept:delete'],
    realApi: dept.realDeletes, realAuth: ['system:dept:realDeletes']
  },
  recovery: { show: true, api: dept.recoverys, auth: ['system:dept:recovery']},
  isExpand: true,
})
const columns = reactive([
  { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
  {
    title: '上级部门', dataIndex: 'parent_id', hide: true, formType: 'tree-select', align:'center',
    dict: { url: 'system/dept/tree' },
    editDefaultValue: (record) => {
      return record.parent_id == 0 ? undefined : record.parent_id
    }
  },
  {
    title: '企业名称', dataIndex: 'name', search: true, width: 150,align:'center',
    commonRules: [{ required: true, message: '部门名称必填' }],
  },
  {
    title: "企业类型",
    dataIndex: "type",
    align:'center',
    formType: "radio",
    search: true,
    addDefaultValue: '1',
    dict: {
      data: [
        {
          label: "园区企业",
          value: "1"
        },
        {
          label: "普通企业",
          value: "2"
        },
      ],
      translation: true,
      // tagColors:{1:blue,2:green}
    }
  },
  { title: '负责人', dataIndex: 'leader', search: true, align:'center',width: 120 },
  {
    title: '手机', dataIndex: 'phone', align:'center',search: true, width: 150,
    commonRules: [{ match: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码' }]
  },
  {
    title: '排序', dataIndex: 'sort', align:'center',formType: 'input-number', addDefaultValue: 1, width: 180,
    min: 0, max: 1000
  },
  {
    title: '状态', dataIndex: 'status', align:'center',search: true, formType: 'radio',
    dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
    addDefaultValue: '1', width: 120
  },
  {
    title: '备注', dataIndex: 'remark', align:'center',hide: true, formType: 'textarea',
  },
  {
    title: '创建时间', dataIndex: 'created_at', align:'center',addDisplay: false, editDisplay: false,
    search: true, formType: 'range', width: 180,
  },
])
</script>

<script>
export default { name: 'system:dept' }
</script>

<style scoped>

</style>
